<template>
  <div>
    <div class=" al-position-rela">

      <!--修改信息按钮-->
      <div v-if="ownerId == visitorId" class="al-position-abs" style="right: 20px">
        <span class="el-icon-edit-outline al-text-color-light-black al-hover-color-light-blue"
              @click="goPage('/user/setUserInfo/1/' + userInfo.id)"
              style="font-size: 25px"></span>
      </div>

      <div class=" al-flex-wrap al-flex-container-center-vh">
        <div @click="drawer = true" class="al-p-10px">
          <el-avatar :size="100" :src="userInfo.avatar"></el-avatar>
        </div>

        <span class="al-font-weight-100 al-fontsize-50px al-p-10px">{{userInfo.nickname}}</span>

      </div>

      <div>
        <div class="al-flex-justify-space-around al-flex-wrap al-text-color-light-black">
          <div v-if="userInfo.gender != null" >
            <div v-if="userInfo.gender == 1">
              <span  class="el-icon-male al-text-color-light-blue"></span>
              <span>男</span>
            </div>

            <div v-if="userInfo.gender == 0">
              <span  class="el-icon-female al-text-color-light-pink"></span>
              <span>女</span>
            </div>
          </div>
          <div class="al-box-size-20px"></div>

          <div v-if="userInfo.age != null" >
            <span class="el-icon-user al-text-color-light-blue"></span>
            <span>{{userInfo.age}}岁</span>
          </div>
          <div class="al-box-size-20px"></div>


          <div v-if="userInfo.isAuthenticated != null" >
            <div v-if="userInfo.isAuthenticated == 1">
              <span class="el-icon-circle-check al-text-color-light-blue"></span>
              <span>已认证</span>
            </div>
            <div v-if="userInfo.isAuthenticated == 0">
              <span class="el-icon-circle-close al-text-color-light-blue"></span>
              <span>未认证</span>
            </div>
          </div>
          <div class="al-box-size-20px"></div>


          <div v-if="userInfo.email != null" >
            <span class="el-icon-message al-text-color-light-blue"></span>
            <span>{{userInfo.email}}</span>
          </div>
          <div class="al-box-size-20px"></div>


          <div v-if="userInfo.phone != null" >
            <span class="el-icon-mobile-phone al-text-color-light-blue"></span>
            <span>{{userInfo.phone}}</span>
          </div>
          <div class="al-box-size-20px"></div>


          <div v-if="userInfo.city != null" >
            <span class="el-icon-location al-text-color-light-blue"></span>
            <span>{{userInfo.city}}</span>
          </div>
          <div class="al-box-size-20px"></div>

        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {IMAGE_UPLOAD_RETURN_URL} from "../../../util/network/api/image/api-image";
  import {request} from "../../../util/network/request";
  import {USER_GET_BY_ID, USER_UPDATE} from "../../../util/network/api/user/api-user";
  import ALImage from "../../../components/public/ALImage";
  import UpdatePasswordComponent from "./UpdatePasswordComponent";
  import eventBus from "../../../util/bus/eventBus";

  export default {
    name: "DisplayUserInfoComponent",
    //组件
    components: {},
    //属性
    props: {},

    //数据
    data() {
      return {
        ownerId: this.$store.state.storeUserInfo.id,
        visitorId: this.$route.params.uid,
        dialogFormVisible: false,
        innerVisible: false,
        userInfo: {},

        imageUrl: '',
        uploadUrl: 'http://47.103.204.62:8764/api/v1/' + IMAGE_UPLOAD_RETURN_URL,
        uploadData: {
          uid: this.$store.state.storeUserInfo.id,
          isAlbum: 0
        }

      }
    },

    //挂载完成时
    mounted() {
      //this.userInfo = this.$store.state.storeUserInfo;
      this.getUserInfoById(this.visitorId);
    },

    //方法
    methods: {
      goPage(path){
        this.gotoPage(path);
      },

      //获取用户信息
      getUserInfoById(uid){
        request({
            url: USER_GET_BY_ID + uid,
        }).then(res => {
            console.log(res);
            this.userInfo = res.data.data;
        }).catch(err => {
            console.log(err)
        })
      },

      //更新用户信息
      updateUserInfo(){
        // console.log(this.tempUserInfo);
        request({
            url: USER_UPDATE,
            method:'post',
            data:this.qsParam(this.tempUserInfo),
        }).then(res => {
            console.log(res);
            if (res.data.code == 1){
              this.$message.success("更新成功");
              this.dialogFormVisible = false;
              this.getUserInfoById(this.tempUserInfo.id);
            }
        }).catch(err => {
            console.log(err);
            this.$message("更新失败");
        })
      },

      //头像上传成功之后的回调函数
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log("上传成功的url");
        console.log(res);
        this.tempUserInfo.avatar = res;
      },

      //头像上传之前的处理方法
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },

    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
